<template>
  <Form :label-width="80">
    <FormItem label="开启">
      <i-switch size="small" v-model="tooltip.show"></i-switch>
    </FormItem>
    <FormItem label="触发类型">
      <RadioGroup size="small" v-model="tooltip.trigger" type="button">
        <Radio :label="item.value" v-for="(item, index) in $PnChartDict.triggers" :key="index">{{ item.label }}</Radio>
      </RadioGroup>
    </FormItem>
    <FormItem label="触发条件">
      <RadioGroup size="small" v-model="tooltip.triggerOn" type="button">
        <Radio :label="item.value" v-for="(item, index) in $PnChartDict.triggerOns" :key="index">{{ item.label }}</Radio>
      </RadioGroup>
    </FormItem>
    <Collapse class="m-t-5px">
      <Panel>
        指示器
        <div slot="content">
          <FormItem label="类型">
            <Select :transfer="true" size="small" v-model="tooltip.axisPointer.type">
              <Option v-for="item in $PnChartDict.axisPointerTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItemPanel v-show="tooltip.axisPointer.type == 'line'" title="直线指示器样式">
            <FormItem label="线的颜色">
              <PnColorPicker size="small" v-model="tooltip.axisPointer.lineStyle.color" alpha recommend/>
            </FormItem>
            <FormItem label="线宽">
              <InputNumber size="small" :max="1000" :min="0" v-model="tooltip.axisPointer.lineStyle.width" :active-change="false"></InputNumber>
            </FormItem>
            <FormItem label="线的类型">
              <Select :transfer="true" size="small" v-model="tooltip.axisPointer.lineStyle.type">
                <Option v-for="(item, index) in $PnChartDict.borderStyles" :value="item.value" :key="index">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </FormItemPanel>
          <FormItemPanel v-show="tooltip.axisPointer.type == 'shadow'" title="阴影指示器样式">
            <FormItem label="填充色">
              <PnColorPicker size="small" v-model="tooltip.axisPointer.shadowStyle.color" alpha recommend/>
            </FormItem>
            <FormItem label="阴影大小">
              <InputNumber size="small" :max="1000" :min="0" v-model="tooltip.axisPointer.shadowStyle.shadowBlur" :active-change="false"></InputNumber>
            </FormItem>
            <FormItem label="阴影颜色">
              <PnColorPicker size="small" v-model="tooltip.axisPointer.shadowStyle.shadowColor" alpha recommend/>
            </FormItem>
          </FormItemPanel>
          <FormItemPanel v-show="tooltip.axisPointer.type == 'cross'" title="十字准星指示器样式">
            <FormItem label="线的颜色">
              <PnColorPicker size="small" v-model="tooltip.axisPointer.crossStyle.color" alpha recommend/>
            </FormItem>
            <FormItem label="线宽">
              <InputNumber size="small" :max="1000" :min="0" v-model="tooltip.axisPointer.crossStyle.width" :active-change="false"></InputNumber>
            </FormItem>
            <FormItem label="线的类型">
              <Select :transfer="true" size="small" v-model="tooltip.axisPointer.crossStyle.type">
                <Option v-for="(item, index) in $PnChartDict.borderStyles" :value="item.value" :key="index">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </FormItemPanel>
        </div>
      </Panel>
      <Panel>
        提示框浮层
        <div slot="content">
          <FormItem label="背景色">
            <PnColorPicker size="small" v-model="tooltip.backgroundColor" alpha recommend/>
          </FormItem>
          <FormItem label="内边距">
            <InputNumber size="small" :max="1000" :min="0" v-model="tooltip.padding" :active-change="false"></InputNumber>
          </FormItem>
          <FormItem label="边框宽度">
            <InputNumber size="small" :max="1000" :min="0" v-model="tooltip.borderWidth" :active-change="false"></InputNumber>
          </FormItem>
          <FormItem label="边框颜色">
            <PnColorPicker size="small" v-model="tooltip.borderColor" alpha recommend/>
          </FormItem>
        </div>
      </Panel>
      <Panel>
        提示框浮层的文本样式
        <div slot="content">
          <FormItem label="颜色">
            <PnColorPicker size="small" v-model="tooltip.textStyle.color" alpha recommend/>
          </FormItem>
          <FormItem label="字体大小">
            <InputNumber size="small" :max="1000" :min="0" v-model="tooltip.textStyle.fontSize" :active-change="false"></InputNumber>
          </FormItem>
        </div>
      </Panel>
    </Collapse>
  </Form>
</template>

<script>
export default {
  name: "EchartsTooltipConfigForm",
  props: {
    value: {
      type: Object,
      default () {
        return {}
      }
    },
  },
  data() {
    return {
      tooltip: this.value
    }
  },
  mounted() {

  },
  methods: {},
  computed: {},
  watch: {
    value (val) {
      this.tooltip = val;
    }
  }
}
</script>

<style scoped>

</style>
